<template>
  <ul class="todo-main">
    <transition-group name="todo" appear>
      <my-item
          v-for="todoobj in todos"
          :key="todoobj.id"
          :todo="todoobj"/>
    </transition-group>
  </ul>
</template>

<script>
import MyItem from "@/components/MyItem";
export default {
  name: "MyList",
  props:['todos'],
  components:{
    MyItem
  }
}
</script>

<style scoped>
  .todo-main{
    margin-left:0px ;
    border: 1px solid #f8dede;
    border-radius: 2px;
    padding: 0px;
  }
  .todo-empty{
    height: 40px;
    line-height: 40px;
    border: 1px solid #f8dede;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;

  }
  /*进入起点，推出的终点*/
  .todo-enter,.todo-leave-to{
    transform: translateX(-100%);
  }
  .todo-enter-active,.todo-leave-active{
    transition:  0.5s linear;
  }
  /*进入终点，推出的起点*/
  .todo-enter-to,.todo-leave{
    transform: translateX(0);
  }
</style>